<template>
  <div class="w-100 h-100">
    <div
      class="w-100 h-10 d-flex justify-content-center"
      style="position: absolute; top: 40; right: 0"
    >
      <FakeLegend
        style="margin-right: 30px"
        :color="['rgba(3, 230, 254, 1)']"
        :text="['故障数量']"
      >
      </FakeLegend>
      <lineLabel shapeColor="rgba(184, 235, 143, 1)" text="故障率" />
    </div>
    <div class="w-100 h-100 sbgzl-box" style="overflow-x: auto">
      <div id="sbgzl" style="width:  100%; height: 100%"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import lineLabel from "@/components/project/lineLabel.vue";
import { useOptions } from "@/hook/useOptions";
import {useFunc} from "@/hook/useFunc";

const colorSingleList = ["rgba(3, 230, 254, 1)", "rgba(184, 235, 143, 1)"];
const props = defineProps({
  selectValue: {
    default: 2024,
  },
});
const jsonData: any = inject("jsonData");
const current = computed(() => {
  let data = [[], []];
  try {
    data = jsonData.value.yxjk.sbgzl;
  } catch (error) {}
  return data;
});
let myChart: any;

watch(
  () => current.value,
  (val) => {
    if (val) {
      myChart.setOption({
        series: [{ data: val[0] }, { data: val[1] }],
      });
    }
  }
);
onMounted(() => {
  let option: any = {
    color: colorSingleList,
    tooltip: {
      trigger: "axis",     
      backgroundColor: "rgba(28,64,81,0.7)",
      borderColor: "transparent",

        textStyle: {
          color: "white",
          fontSize: 20,
        },
    },
    grid: {
      left: "5%",
      right: "5%",
      bottom: "5%",
      top: "14%",
      containLabel: true,
    },
    dataZoom: [
            {
                type: 'slider',
                height: 0,
                moveHandleSize: 10,
                xAxisIndex: 0,
                zoomLock: true,
                start: 0,
                end: 60,
                bottom: "15%",
            }
        ],
    xAxis: {
      type: "category",
      data: useOptions().paishuiList.map((item: any) => item.label),
      axisLabel: {
        interval: "auto", // 自动计算间隔
        minInterval: 1, // 设置最小间隔为1
        textStyle: {
          fontSize: 20,
          color: "#667A8E",
            lineHeight: 18, // 设置行高以适应多行文本
          },
      },

      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
          lineStyle: {
            width: 1,
            color: "#667A8E",
          },
      },
    },
    yAxis: [
      {
        name: "个",

        type: "value",
        nameTextStyle: {
          color: "#8994A3",
          fontSize: 20,
        },
        axisLabel: {
          fontSize: 20,
          color: "#667A8E",
          formatter: "{value}" + "",
        },
        splitLine: {
          // 配置分割线
          show: true,
          lineStyle: {
            color: "rgba(92, 225, 255, 0.5)", // 蓝色分割线
            type: "solid", // 实线
          },
        },
      },
      {
        name: "%",
        type: "value",
        position: "right",
        splitLine: {
          show: false,
        },
        nameTextStyle: {
          color: "#8994A3",
          fontSize: 20,
        },
        axisLabel: {
          fontSize: 20,
          color: "#667A8E",
        },
      },
    ],
    series: [
      {
        name: "故障数量",
        type: "bar",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(92, 225, 255, 1)", // 顶部颜色
            },
            {
              offset: 0.01,
              color: "rgba(92, 225, 255, 0)", // 顶部颜色
            },
            {
              offset: 1,
              color: "rgba(92, 225, 255, 0.5)", // 底部颜色，透明
            },
          ]),
        },
        data: [],
        yAxisIndex: 0,
        barWidth: 20,
        label: {
          show: false,
          position: "top", // 标签显示在柱状图顶部
          fontSize: 14, // 标签字体大小
          color: "#DEDEDE",
        },
      },
      {
        name: "故障率",
        type: "line",
        showSymbol: false,
        data: [],
        yAxisIndex: 1,
        color: "rgba(184, 235, 143, 1)",
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(184, 235, 143, 0.8)", // 颜色渐变起始颜色
              },
              {
                offset: 0.3,
                color: "rgba(184, 235, 143, 0)", // 颜色渐变结束颜色
              },
            ]),
          },
        },
      },
    ],
  };

  myChart = echarts.init(document.getElementById("sbgzl") as HTMLElement);
  myChart.setOption(option);
  const scrollContainer = document.querySelector(".sbgzl-box");
  // useFunc().autoScroll(scrollContainer, "horizontal");
});
</script>

<style></style>
